import Child1 from './pages/Child1'
function App() {
/**
*  1. ts新增的类型(js原有的/和ts新增的)-> 基本类型数据（原始类型）；引用类型()？
*  2. ts中type和interface的区别？
*  3. react+ts 函数组件声明的方法？ React.FC -> {FC} 【函数组件加FC和不加FC有什么不同】
*  4. 父传子的时候依赖props -> 组件属性校验[interface IMyProps{ name: string,..}]
*  5. 封装组件->元素html标签自带属性可以不用显示声明，可以继承React提供的原生html属性 （input->value/placeholer,button->disabled）
*/
  // ---------案例1.回顾type interface用法----------
 interface ILogin {
    username: string,
    pass: number
 }
 
//  type ILogin = {
//   username: string,
//   pass: number
// }
  // let email: string = '123@qq.com'
  // type Temail = string 
  //  let  email:Temail = '1223@qq.com'
  //  email= 1
  const logoTo = (params:ILogin) => {
      
  }
  
  logoTo({username: 'zhangsan', pass: 123})
  
  // 联合类型
  // let cout:number | string = 0
  // type Tcount = number | string
  // let count:Tcount = 0
  
  // -------------案例2.函数组件的声明
  
//  let  loginParam= {username:'zhangshan',pass: 1234}
 let count= 100
 // TS数据类型的基本用法
 // type
//  type word = '山东' | '北京' | '上海'
// type text = string | { text:string }
// let msgTxt: text
// msgTxt = 'hahah'
// msgTxt = { text: 1}
// let text: string | {text: string} = 'aaa'
// let fn1: () => void
let userinfo = { name: 'zhangsan', age: 10}
return (
    <div className="App">
      <h1>hello TS</h1>
      {/* 案例1.回顾type interface用法 */}
      <h2>一.type 和interface</h2>
      <pre>
        1. 引用类型用interface<br/>
        2. 基本类型用type，当然也可以不别名<br/>
        3. let age: number = 18 // 像这样
      </pre>
       {/* 案例2. ract函数组件声明 */}
       <h2>二. 函数组件的定义/声明</h2>
       <pre>
         1. React.FC 声明函数组件用，会自动推断函数是否符合一个函数式组件的规则<br/>
       </pre>
       <h2>三. 给组件的props添加类型检查/约束</h2>
       <pre>
         首先声明一个和这个props相关的接口: <br/>
         1. interface IChildProps - count: number<br/>
         应用到函数组件的参数上：<br/>
         2. const fn:FC:ChildProps props<br/>
         3.
       </pre>
      <Child1 count={count} />
      
    </div>
  )
}

export default App
